<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ContainerIndent">

                    <div class="ContainerIndent gray">
                        <h1 class="TexAlCenter gray Fs30">
                            <span class="red Fs40">Sentinel Documentation<br /><i class="icon-code"/></span>
                        </h1>
                    </div>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Installation</div>
                        <div class="EmptyBox10"/>
                        <p>
                            Sentinel provides a main <i>template.xhtml</i> and additional leftmenu.xhtml, topbar.xhtml files for the base layout. These 3 files must be placed under
                            WEB-INF folder. Provided empty-page.xhtml is a sample content page using the main template.xhtml that defines "content" and "head" ui:define placeholders. Other required resources are the css, js, image and font files that are located
                            inside resources/sentinel-layout folder, simply copy the sentinel-layout folder to your %WEB-APP-FOLDER%/resources folder so that final path would be %WEB-APP-FOLDER%/resources/sentinel-layout/. Please
                            refer to demo app or maven project of the demo app as the reference.
                        </p>
                        <p>
                            Theme is a regular PrimeFaces theme and setup is simple as defining primefaces.THEME context parameter in web.xml as "sentinel", refer to <a style="color:#e90c45" href="http://www.primefaces.org/themes">themes page</a> for more information.
                        </p>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Navigation Menu</div>
                        <div class="EmptyBox10"/>
                        <p>
                            Sentinel provides a navigation menu positioned at left side of the screen. This menu is responsive and adjusts to the screen width automatically.
                            Menu is actually a PrimeFaces component specifically created for Sentinel under <i>http://primefaces.org/sentinel</i> namespace having <i>menu</i> as the tag name., usage is same as a regular PrimeFaces component that utilizes p:submenu and p:menuitem
                            components. This component is placed inside the Sentinel theme jar so this jar must be in your classpath. Demo application features an example menu created declaratively however since this component is a JSF component, you can also use PrimeFaces MenuModel API
                            to create the menu dynamically.
                        </p>

                        <p>
                            Menu keeps its state using cookies so that between page navigations, state of the menu can be restored. In case you'd like to clear
                            this state, call <i>Sentinel.clearMenuState()</i> javascript method. For stateful menu to work, each menuitem and submenu must have explicit ids defined, otherwise
                            ids will be generated by JSF that may be different for each page. So please make sure you have defined explicit ids for each menuitem and submenu to have a stateful menu.
                             Menu is large by default, if you prefer slim menu by default add "slimmenu" style class to the #layout-menubar div in leftmenu.xhtml.
                        </p>

                        <p>
                            In addition, jQuery and PrimeFaces.js files must be available on the page for menu to work. These files are included automatically whenever there is a PrimeFaces component on the page that
                            depends on them, however you can easily add them manually if required using h:outputScript component with name attribute values jquery/jquery.js and primefaces.js correspondingly under primefaces library. An example would be
                            <i>&lt;h:outputScript name="jquery/jquery.js" library="primefaces" /&gt;</i>
                        </p>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Migration Guide</div>
                        <div class="EmptyBox10"/>
                        <div class="Fs15 red">1.1 to 1.2</div>
                        <ul>
                            <li>- Update layout resources located inside css, fonts, images and js folders under sentinel-layout folder.</li>
                            <li>- Replace theme jar with the new jar.</li>
                            <li>- Remove js/layout.js file from 404, access-denied and error pages.</li>
                            <li>- Replace js/layout.js file with js/login.js in login.xhtml.</li>
                            <li>- Remove IE specific css from template.xhtml.</li>
                        </ul>
                        <div class="EmptyBox10"/>
                        <div class="Fs15 red">1.0 to 1.1</div>
                        <ul>
                            <li>- Update layout resources located inside css, fonts, images and js folders.</li>
                            <li>- Replace theme jar with the new jar.</li>
                            <li>- Replace the menu markup in leftmenu.xhtml with the Sentinel Menu component. Refer to demo app for the example.</li>
                            <li>- Set "sm-mobiletopmenu" as the id of the second ul element in topbar.xhtml. Id of the first ul is "sm-topmenu" and it has not changed.</li>
                        </ul>
                    </p:panel>

                    <div class="EmptyBox30"/>

                    <div class="ContainerIndent">
                        <h1 class="TexAlCenter gray Fs30">
                            <span class="red Fs30">Core Layout<br /></span>
                        </h1>
                        <p class="leaden-back">
                            Core Layout is a set of CSS style classes used to create responsive layouts. Sentinel is also based on Core Layout and you may also choose to use this css utility
                            in your application as well however you can also use any other CSS layout framework with Sentinel.
                        </p>
                    </div>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Responsive Mode</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt25" class="ui-panelgrid ui-widget Wid100" role="grid">
                            <tbody>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Responsive Mode</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Responsive</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Makes an element responsive using media queries. For example; <br />
                                        if screen width is smaller than 960px and bigger than 640px, this element's width sets to '50%', <br />
                                        and if screen width smaller than 640px, this element's width sets to '100%'. <br />
                                        Thus, width of this element adjusted to screen resolution on mobile phones and tablets. <br />
                                        Resize browser window to see changes of red boxes below.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p:panel>
                    <p:panel>
                        <div class="Container33 white Responsive"><div class="ContainerIndent red-back"><div class="ContainerIndent">Responsive Element (With Container33 Class)</div></div></div>
                        <div class="Container33 white Responsive"><div class="ContainerIndent red-back"><div class="ContainerIndent">Responsive Element (With Container33 Class)</div></div></div>
                        <div class="Container33 white Responsive"><div class="ContainerIndent red-back"><div class="ContainerIndent">Responsive Element (With Container33 Class)</div></div>
                        </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">ContainerX's</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt37" class="ui-panelgrid ui-widget Wid100" role="grid">
                            <tbody>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Containers (For Responsive Layout)</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        <span class="hardblue">
                                            Container100 <br />
                                            Container96 <br />
                                            Container90 <br />
                                            Container85 <br />
                                            Container80 <br />
                                            Container75 <br />
                                            Container70 <br />
                                            Container60 <br />
                                            Container50 <br />
                                            Container40 <br />
                                            Container33 <br />
                                            Container30 <br />
                                            Container25 <br />
                                            Container20 <br />
                                            Container10 <br />
                                            Container5</span>
                                    </td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Very similar to the WidX classes but has additional features. These classes are aligned left and overflow inside is hidden.
                                        ContainerX classes are not mobile-compatible without the 'Repsonsive' class.
                                        Resize browser window to see changes of red and orange boxes below. <br />
                                        <br />
                                        .Container100{ width:100%; overflow:hidden; float:left;} ,
                                        .Container96{ width:96%; overflow:hidden; float:left;} ,
                                        .Container90{ width:90%; overflow:hidden; float:left;} ,
                                        .Container85{ width:85%; overflow:hidden; float:left;} ,
                                        .Container80{ width:80%; overflow:hidden; float:left;} ,
                                        .Container75{ width:75%; overflow:hidden; float:left;} ,
                                        .Container70{ width:70%; overflow:hidden; float:left;} ,
                                        .Container60{ width:60%; overflow:hidden; float:left;} ,
                                        .Container50{ width:50%; overflow:hidden; float:left;} ,
                                        .Container40{ width:40%; overflow:hidden; float:left;} ,
                                        .Container33{ width:33.3%; overflow:hidden; float:left;} ,
                                        .Container30{ width:30%; overflow:hidden; float:left;} ,
                                        .Container25{ width:25%; overflow:hidden; float:left;} ,
                                        .Container20{ width:20%; overflow:hidden; float:left;} ,
                                        .Container10{ width:10%; overflow:hidden; float:left;} ,
                                        .Container5{ width:5%; overflow:hidden; float:left;} ,
                                        .ContainerIndent{width:auto; overflow:hidden; display:block;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Container Indent</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">ContainerIndent</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Depending on the solubility of 'ContainerX' classes allows an indentation. This indentation is controlled by the CSS media-queries.
                                        Of the elements inserted into the container , prevents the stop leaning on each other<br />
                                        <br />
                                        .ContainerIndent{width:auto; overflow:hidden; display:block;}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p:panel>
                    <p:panel>
                        <div class="Fleft red-back white Container20 MarAuto Responsive"> <br />Container20 - Responsive<br /><br /> </div>
                        <div class="Fleft orange-back white Container30 MarAuto Responsive"> <br />Container30 - Responsive<br /><br /> </div>
                        <div class="Fleft red-back white Container50 MarAuto Responsive"> <br />Container50 - Responsive<br /><br /> </div>
                        <div class="EmptyBox10"/>
                        <div class="Fleft red-back white Container33 MarAuto Responsive"> <br />Container33 - Reponsive<br /><br /> </div>
                        <div class="Fleft orange-back white Container33 MarAuto Responsive"> <br />Container33 - Reponsive<br /><br /> </div>
                        <div class="Fleft red-back white Container33 MarAuto Responsive"> <br />Container33 - Reponsive<br /><br /> </div>
                        <div class="EmptyBox10"/>

                        <div class="Fleft white red-back Container40 MarAuto Responsive">Container40<div class="ContainerIndent white-back leaden">Container Indent</div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Selection</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt52" class="ui-panelgrid ui-widget Wid100" role="grid">
                            <tbody>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        <span class="orange Fs20 Wid30">Class Group</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20 Wid30">Selection</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue Wid30">Unselectable</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Makes text unselectable <br />
                                        <br />
                                        .Unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p:panel>
                    <p:panel>
                        <div class="Container100 white Responsive"><div class="ContainerIndent red-back"><div class="ContainerIndent Unselectable">This is unselectable text</div></div></div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Displaying</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt64" class="ui-panelgrid ui-widget Wid100" role="grid">
                            <tbody>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Displaying</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">DispBlock</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Displays an element as a block element <br />
                                        <br />
                                        .DispBlock{ display:block;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">DispNone</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        The element will not be displayed at all (has no effect on layout)<br />
                                        <br />
                                        .DispNone{display:none;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">DispTable</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Let the element behave like a table element <br />
                                        <br />
                                        .DispTable{display:table;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">DispInlBlock</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box <br />
                                        <br />
                                        .DispInlBlock{display:inline-block;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">DispTableCell</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Let the element behave like a td element <br />
                                        <br />
                                        .DispTableCell{ display:table-cell; vertical-align:middle;}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p:panel>
                    <p:panel></p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel>
                        <div class="Fs20 TexAlCenter red">Positioning</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt87" class="ui-panelgrid ui-widget Wid100" role="grid">
                            <tbody>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Positioning</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">PosFixed</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        The element is positioned relative to the browser window <br />
                                        <br />
                                        .PosFixed{position:fixed;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">PosAbsolute</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        The element is positioned relative to its first positioned (not static) ancestor element <br />
                                        <br />
                                        .PosAbsolute{position:absolute;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">PosRelative</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        The element is positioned relative to its normal position, so 'left:20' adds 20 pixels to the element's LEFT position <br />
                                        <br />
                                        .PosRelative{ position:relative;}
                                    </td>
                                </tr>
                                <tr class="ui-widget-content" role="row">
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">PosStatic</span></td>
                                    <td role="gridcell" class="ui-panelgrid-cell">
                                        Default value. Elements render in order, as they appear in the document flow <br />
                                        <br />
                                        .PosStatic{position:static;}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p:panel>
                    <p:panel></p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Underline</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt107" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Text Decoration</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Underline</span></td><td role="gridcell" class="ui-panelgrid-cell">Defines a line below the text <br /> <br />                                           .Underline{ text-decoration:underline;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back">
                                <div class="Underline TexAlCenter">This is underlined text</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Floating</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt119" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Floating</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Fleft</span></td><td role="gridcell" class="ui-panelgrid-cell">The element floats to the left <br /> <br />                                           .Fleft{ float:left;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Fright</span></td><td role="gridcell" class="ui-panelgrid-cell">The element floats to the right <br /> <br />                                           .Fleft{ float:right;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Fnone</span></td><td role="gridcell" class="ui-panelgrid-cell">The element is not floated, and will be displayed just where it occurs in the text. <br /> <br />                                           .Fleft{ float:none;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back">
                        <div class="Fleft red-back white PadWithBorder10 Wid20">This is floats to the left</div>
                        <div class="Fright red-back white PadWithBorder10 Wid20">This is floats to the right</div>
                        <div class="Fnone red-back white PadWithBorder10 Wid20">This is not floated (default)</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Overflows</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt137" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Overflow</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OvHidden</span></td><td role="gridcell" class="ui-panelgrid-cell">The overflow is clipped, and the rest of the content will be invisible <br /> <br />                                           .OvHidden{ overflow:hidden;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OvScroll</span></td><td role="gridcell" class="ui-panelgrid-cell">The overflow is clipped, but a scroll-bar is added to see the rest of the content <br /> <br />                                           .OvScroll{ overflow:scroll;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OvAuto</span></td><td role="gridcell" class="ui-panelgrid-cell">If overflow is clipped, a scroll-bar should be added to see the rest of the content <br /> <br />                                           .OvAuto{ overflow:auto;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OvVisible</span></td><td role="gridcell" class="ui-panelgrid-cell">The overflow is not clipped. It renders outside the element's box. <br /> <br />                                           .OvVisible{ overflow:visible;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OvXScroll <br /> OvYScroll <br /> OvXHidden <br /> OvYHidden</span></td><td role="gridcell" class="ui-panelgrid-cell">Axis of the elements (X or Y) mentioned were hidden or scroll <br /> <br />                                           .OvXScroll{ overflow-x:scroll;} , .OvYScroll{ overflow-y:scroll;} , .OvXHidden{ overflow-x:hidden;} , .OvYHidden{ overflow-y:hidden;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <button id="j_idt157" name="j_idt157" type="button"
                                class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
                                onclick="window.open('http://www.w3schools.com/cssref/pr_pos_overflow.asp','_blank')">
                            <span class="ui-button-text ui-c">Get More Info About Overflows</span>
                        </button>
                        <script id="j_idt157_s" type="text/javascript">PrimeFaces.cw("Button","widget_j_idt157",{id:"j_idt157",widgetVar:"widget_j_idt157"});</script>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Empty Boxes</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt161" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Empty Boxes</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">EmptyBox5 <br /> EmptyBox10 <br /> EmptyBox20 <br /> EmptyBox30 <br /> EmptyBox40 <br /> EmptyBox50                                           <br /> EmptyBox60 <br /> EmptyBox70 <br /> EmptyBox80 <br /> EmptyBox90 <br /> EmptyBox100 <br /> EmptyBox110                                           <br /> EmptyBox120 <br /> EmptyBox130 <br /> EmptyBox140 <br /> EmptyBox150</span></td><td role="gridcell" class="ui-panelgrid-cell">Horizontally , leaving space so that the value of the specified number of pixels <br /> <br />                                           .EmptyBox5{ display:block; width:100%; height:5px; overflow:hidden;} ,                                          .EmptyBox10{ display:block; width:100%; height:10px; overflow:hidden;} ,                                          .EmptyBox20{ display:block; width:100%; height:20px; overflow:hidden;} ,                                          .EmptyBox30{ display:block; width:100%; height:30px; overflow:hidden;} ,                                          .EmptyBox40{ display:block; width:100%; height:40px; overflow:hidden;} ,                                          .EmptyBox50{ display:block; width:100%; height:50px; overflow:hidden;} ,                                          .EmptyBox60{ display:block; width:100%; height:60px; overflow:hidden;} ,                                          .EmptyBox70{ display:block; width:100%; height:70px; overflow:hidden;} ,                                          .EmptyBox80{ display:block; width:100%; height:80px; overflow:hidden;} ,                                          .EmptyBox90{ display:block; width:100%; height:90px; overflow:hidden;} ,                                          .EmptyBox100{ display:block; width:100%; height:100px; overflow:hidden;} ,                                          .EmptyBox110{ display:block; width:100%; height:100px; overflow:hidden;} ,                                          .EmptyBox120{ display:block; width:100%; height:100px; overflow:hidden;} ,                                          .EmptyBox130{ display:block; width:100%; height:100px; overflow:hidden;} ,                                          .EmptyBox140{ display:block; width:100%; height:100px; overflow:hidden;} ,                                          .EmptyBox150{ display: block; width: 100%; height:150px; overflow:hidden;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="red-back white PadWithBorder10 Wid20 MarAuto">Content</div>
                        <div class="EmptyBox30">this is empty box with 30px height value (EmptyBox30)</div>
                        <div class="red-back white PadWithBorder10 Wid20 MarAuto">Content</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Opacity</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt173" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Opacity</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">OpacZero <br /> Opac10 <br /> Opac20 <br /> Opac30 <br /> Opac40 <br /> Opac50 <br /> Opac60                                            <br /> Opac70 <br /> Opac80 <br /> Opac90 <br /> Opac95 <br /> Opac100</span></td><td role="gridcell" class="ui-panelgrid-cell">Element gives transparency specified value <br /> <br />                                           .Opac100{ opacity:1; -webkit-opacity:1; -moz-opacity:1;} ,                                         .Opac95{ opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95;} ,                                          .Opac90{ opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9;} ,                                          .Opac80{ opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8;} ,                                          .Opac70{ opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7;} ,                                          .Opac60{ opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6;} ,                                          .Opac50{ opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5;} ,                                          .Opac40{ opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4;} ,                                          .Opac30{ opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3;} ,                                          .Opac20{ opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2;} ,                                          .Opac10{ opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1;} ,                                          .OpacZero{ opacity:0; -webkit-opacity:0; -moz-opacity:0;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="Fleft red-back white PadWithBorder10 Wid20 MarAuto Opac10">Opac10</div>
                        <div class="Fleft red-back white PadWithBorder10 Wid20 MarAuto Opac30">Opac30</div>
                        <div class="Fleft red-back white PadWithBorder10 Wid20 MarAuto Opac50">Opac50</div>
                        <div class="Fleft red-back white PadWithBorder10 Wid20 MarAuto Opac70">Opac70</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">WidX's</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt185" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Width Special Values</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Wid100 <br /> Wid90 <br /> Wid80 <br /> Wid70 <br /> Wid60 <br /> Wid50 <br /> Wid45 <br /> Wid40                                           <br /> Wid33 <br /> Wid30 <br /> Wid25 <br /> Wid20 <br /> Wid10</span></td><td role="gridcell" class="ui-panelgrid-cell">Element data width is specified with a percentage value. Add Responsive class to apply responsive features.<br /> <br />                                           .Wid100{ width:100%;} ,                                          .Wid90{ width:90%;} ,                                          .Wid80{ width:80%;} ,                                          .Wid70{ width:70%;} ,                                          .Wid60{ width:60%;} ,                                          .Wid50{ width:50%;} ,                                          .Wid45{ width:45%;} ,                                          .Wid40{ width:40%;} ,                                          .Wid30{ width:30%;} ,                                          .Wid33{ width:33.3%;} ,                                          .Wid25{ width:25%;} ,                                          .Wid20{ width:20%;} ,                                          .Wid10{ width:10%;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="Fleft red-back white Wid20 MarAuto Responsive"> <br />Wid20 - Responsive<br /><br /> </div>
                        <div class="Fleft orange-back white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="Fleft red-back white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="Fleft orange-back white Wid20 MarAuto Responsive"> <br />Wid20 - Responsive<br /><br /> </div>
                        <div class="Fleft red-back white Wid20 MarAuto"> <br />Wid20<br /><br /> </div>
                        <div class="EmptyBox10"/>
                        <div class="Fleft red-back white Wid33 MarAuto Responsive"> <br />Wid33 - Reponsive<br /><br /> </div>
                        <div class="Fleft orange-back white Wid33 MarAuto Responsive"> <br />Wid33 - Reponsive<br /><br /> </div>
                        <div class="Fleft red-back white Wid33 MarAuto Responsive"> <br />Wid33 - Reponsive<br /><br /> </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Text Aligning</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt197" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Text Align</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">TexAlCenter</span></td><td role="gridcell" class="ui-panelgrid-cell">Centers the text<br /> <br />                                           .TexAlCenter{ text-align:center;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">TexAlLeft</span></td><td role="gridcell" class="ui-panelgrid-cell">Aligns the text to the left <br /> <br />                                           .TexAlLeft{ text-align:left;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">TexAlRight</span></td><td role="gridcell" class="ui-panelgrid-cell">Aligns the text to the right <br /> <br />                                           .TexAlRight{ text-align:right;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="TexAlCenter Container100">This text align center</div>
                        <div class="TexAlLeft Container100">This text align left</div>
                        <div class="TexAlRight Container100">This text align right</div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Box Size</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt215" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Box Sizing</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">BoxSizeContent</span></td><td role="gridcell" class="ui-panelgrid-cell">Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included <br /> <br />                                           .BoxSizeContent{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">BoxSizeBorder</span></td><td role="gridcell" class="ui-panelgrid-cell">The width and height properties (and min/max properties) includes content, padding and border, but not the margin <br /> <br />                                           .BoxSizeBorder{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="BoxSizeBorder Container30 red-back white" style="border:solid 10px #0bb113;"><div class="ContainerIndent">Box Sizing : BoxSizeBorder (same width with below box)</div></div>
                        <div class="EmptyBox10"/>
                        <div class="BoxSizeContent Container30 red-back white">
                            <div class="ContainerIndent">Box Sizing : BoxSizeContent</div>
                        </div>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Font Sizes</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt230" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Font Size</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Wid100 <br /> Wid90 <br /> Wid80 <br /> Wid70 <br /> Wid60 <br /> Wid50 <br /> Wid45 <br /> Wid40                                           <br /> Wid33 <br /> Wid30 <br /> Wid25 <br /> Wid20 <br /> Wid10</span></td><td role="gridcell" class="ui-panelgrid-cell">Set to the specified pixel value of font-size. <br /> <br />                                           .Fs9{font-size:9px !important;} ,                                           .Fs10{font-size:10px !important;} ,                                          .Fs11{font-size:11px !important;} ,                                           .Fs12{font-size:12px !important;} ,                                           .Fs13{font-size:13px !important;} ,                                           .Fs14{font-size:14px !important;} ,                                           .Fs15{font-size:15px !important;} ,                                           .Fs16{font-size:16px !important;} ,                                           .Fs17{font-size:17px !important;} ,                                           .Fs18{font-size:18px !important;} ,                                           .Fs19{font-size:19px !important;} ,                                           .Fs20{font-size:20px !important;} ,                                           .Fs21{font-size:21px !important;} ,                                           .Fs22{font-size:22px !important;} ,                                           .Fs23{font-size:23px !important;} ,                                           .Fs24{font-size:24px !important;} ,                                           .Fs25{font-size:25px !important;} ,                                           .Fs26{font-size:26px !important;} ,                                           .Fs27{font-size:27px !important;} ,                                           .Fs28{font-size:28px !important;} ,                                           .Fs29{font-size:29px !important;} ,                                           .Fs30{font-size:30px !important;} ,                                          .Fs40{font-size:40px !important;} ,                                          .Fs50{font-size:50px !important;} ,                                          .Fs60{font-size:60px !important;} ,                                          .Fs100{font-size:100px !important;} ,                                          .Fs130{font-size:130px !important;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <span class="Fs14">Font Size : 14px</span><br />
                        <span class="Fs18">Font Size : 18px</span><br />
                        <span class="Fs24">Font Size : 24px</span><br />
                        <span class="Fs30">Font Size : 30px</span><br />
                        <span class="Fs60">Font Size : 60px</span>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Font Weights</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt242" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Font Weight</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">FontBold</span></td><td role="gridcell" class="ui-panelgrid-cell">Defines thick characters. <br /> <br />                                           .FontBold{ font-weight:bold;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">FontLight</span></td><td role="gridcell" class="ui-panelgrid-cell">Defines lighter characters. <br /> <br />                                           .FontLight{ font-weight:lighter;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">FontNormal</span></td><td role="gridcell" class="ui-panelgrid-cell">Defines normal characters. This is default. <br /> <br />                                           .FontNormal{ font-weight:normal;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <span class="Fs20 FontBold orange">This is bold text</span><br />
                        <span class="Fs20 FontLighter orange">This is lighter text</span>
                    </p:panel>

                    <div class="EmptyBox30"/>
                    <p:panel styleClass="leaden-back">
                        <div class="Fs20 TexAlCenter red">Transitions Timing (For CSS3 Animations)</div>
                        <div class="EmptyBox10"/>
                        <table id="j_idt260" class="ui-panelgrid ui-widget Wid100" role="grid"><tbody><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Group</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid30">Class Name</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="orange Fs20 Wid40">Instructions</span></td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20">Transitions Timing</span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Animated05</span></td><td role="gridcell" class="ui-panelgrid-cell">Make css3 transitions with the specified duration. ( Animated05 = Transition ends in 500 milli-seconds with easing) <br /> <br />                                           .Animated05{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}</td></tr><tr class="ui-widget-content" role="row"><td role="gridcell" class="ui-panelgrid-cell"><span class="Fs20"></span></td><td role="gridcell" class="ui-panelgrid-cell"><span class="hardblue">Animated05</span></td><td role="gridcell" class="ui-panelgrid-cell">Make css3 transitions with the specified duration. ( Animated1 = Transition ends in 1 second with easing) <br /> <br />                                           .Animated1{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}</td></tr></tbody></table>
                    </p:panel>
                    <p:panel styleClass="leaden-back TexAlCenter">
                        <div class="red-back Animated05 changecolor Container30 white" style="margin-right: 10px;"><br />Hover Here ( Color and padding changing in 500 milli-seconds with Animated05 )<br /><br /></div>
                        <div class="orange-back Animated1 changecolor Container30 white"><br />Hover Here ( Color and padding changing in 1 second with Animated1 )<br /><br /></div>
                    </p:panel>

                    <div class="EmptyBox60"/>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>